<!--
 * @Author: 赵成刚-我的
-->
<template>
  <view class="my-box">
    <!-- 头部登录信息 -->
    <view class="user-box my-top-box">
      <view class="my-top-bg-box">
        <view
          class="u-flex u-m-t-40 u-m-l-58 u-m-b-40"
          style="justify-content: space-between"
        >
          <u-avatar
            @click="getMapLocation"
            class="u-m-r-30"
            src="https://minio.wskjwl.com/uipicture/touxiang.png"
            size="120"
          ></u-avatar>
          <view class="u-flex u-row-between driverName-box">
            <view>
              <view
                class="u-flex u-font-36 u-p-b-20 color-white"
                @click="goLogin"
              >
                <text
                  v-if="Object.keys(userInfo).length != 0 && !userInfo.username"
                >
                  司机
                </text>
                <view
                  v-if="userInfo.username"
                  style="display: flex; align-items: center"
                >
                  <view> {{ userInfo.username }}</view>
                  <view
                    @click="certificationReminder"
                    class="driver-status"
                    :class="{ auth: userInfo.driverRealNameStatus }"
                    >{{
                      userInfo.driverRealNameStatus ? '已实名' : '未实名'
                    }}</view
                  >
                </view>
                <text v-if="Object.keys(userInfo).length === 0">
                  登录/注册
                </text>
              </view>
              <view class="u-font-28 color-white">
                {{ userInfo.userAccount ? userInfo.userAccount : '' }}
              </view>
            </view>
          </view>
          <view class="u-flex">
            <view class="rate-box" v-if="Object.keys(userInfo).length != 0">
              <view class="rate-info">
                <view class="rate-title"
                  >综合评分 {{ userInfo.comprehensiveScore }}</view
                >
                <u-rate
                  :disabled="true"
                  active-color="#FADB14"
                  size="20"
                  gutter="8"
                  v-model="userInfo.comprehensiveScore"
                ></u-rate>
              </view>
            </view>
            <view class="setting-icon" @click="settingBtn">
              <image src="../../../static/my/setting.png"></image>
            </view>
          </view>
        </view>
        <view class="audit-box">
          <view class="audit-item" @click="certificate(1)">
            <image
              style="width: 56rpx; height: 60rpx"
              src="../../../static/my/auth-icon1.png"
            ></image>
            <view class="u-m-l-20">
              <view>司机认证</view>
              <view class="auth-status" v-if="userInfo.driverInfo">
                <image
                  v-if="userInfo.driverInfo.driverAuditStatus == '1'"
                  src="../../../static/my/auth-2.png"
                ></image>
                <image
                  v-if="
                    !userInfo.driverInfo ||
                    userInfo.driverInfo.driverAuditStatus == '2'
                  "
                  src="../../../static/my/auth-1.png"
                ></image>
                <image
                  v-if="userInfo.driverInfo.driverAuditStatus == '0'"
                  src="../../../static/my/auth-0.png"
                ></image>
              </view>
            </view>
          </view>
          <view class="audit-item" @click="certificate(2)">
            <image
              style="width: 60rpx; height: 60rpx"
              src="../../../static/my/auth-icon2.png"
            ></image>
            <view class="u-m-l-20">
              <view>车辆认证</view>
              <view class="auth-status" v-if="userInfo.carInfo">
                <image
                  v-if="userInfo.carInfo.carAuditStatus == '1'"
                  src="../../../static/my/auth-2.png"
                ></image>
                <image
                  v-if="
                    !userInfo.carInfo || userInfo.carInfo.carAuditStatus == '2'
                  "
                  src="../../../static/my/auth-1.png"
                ></image>
                <image
                  v-if="userInfo.carInfo.carAuditStatus == '0'"
                  src="../../../static/my/auth-0.png"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="m-ul">
      <view
        class="m-li"
        v-for="(item, index) in mList"
        :key="index"
        @click="handleJump(item.path, item.title)"
      >
        <image :src="item.icon" style="width: 32rpx; height: 32rpx"></image>
        <view
          class="m-li-title"
          :class="{ msg: item.title == '我的消息' && newMsg }"
          >{{ item.title }}</view
        >
        <u-icon
          class="m-icon"
          name="arrow-right"
          color="#333"
          size="28"
        ></u-icon>
      </view>
    </view>
    <u-popup
      v-model="popupshow"
      mode="center"
      width="600"
      height="600"
      class="popupURL0-box"
    >
      <view class="popupURL-popup-box" v-if="popupURL">
        <view>邀请加入</view>
        <image
          show-menu-by-longpress
          :src="popupURL"
          alt=""
          class="popupURL-box"
        />
        <view>微信扫一扫进入物实科技小程序</view>
      </view>
    </u-popup>
    <u-popup
      v-model="popup1show"
      mode="center"
      width="600"
      height="800"
      class="popupURL1-box"
    >
      <image
        v-if="popupURL1"
        show-menu-by-longpress
        :src="popupURL1"
        alt=""
        class="popupURL-box"
      />
    </u-popup>
    <!-- 个人头像点击 -->
    <u-popup
      v-model="avatarModel"
      mode="bottom"
      height="220rpx"
      border-radius="4"
    >
      <view class="payment-content">
        <u-cell-group>
          <u-cell-item
            v-for="(item, index) of avatarList"
            :key="index"
            :arrow="false"
            :title-style="{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }"
            :title="item.title"
            @click="handleClickAvatar(item)"
          ></u-cell-item>
        </u-cell-group>
        <u-gap height="20" bg-color="rgb(238, 238, 238)"></u-gap>
        <u-cell-group>
          <u-cell-item
            title="取消"
            :arrow="false"
            :title-style="{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }"
            @click="hideLogout"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </u-popup>
    <!-- 点击客服电话 -->
    <u-popup
      v-model="customerServiceModel"
      mode="bottom"
      height="444rpx"
      border-radius="4"
    >
      <view class="payment-content">
        <u-cell-group>
          <u-cell-item
            v-for="(item, index) of customerServiceList"
            :key="index"
            :arrow="false"
            :title-style="{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }"
            :title="item.title"
            @click="handleClickcustomerService(item, index)"
          ></u-cell-item>
        </u-cell-group>
        <u-gap height="20" bg-color="rgb(238, 238, 238)"></u-gap>
        <u-cell-group>
          <u-cell-item
            title="取消"
            :arrow="false"
            :title-style="{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }"
            @click="hidecustomerService"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </u-popup>
    <!--创建一个画布，将它移出屏幕外看不到的地方-->
    <canvas
      class="canvas-code"
      type="2d"
      canvas-id="myQrcode"
      style="left: -800px; position: absolute"
    />
    <!-- 提示信息 -->
    <u-modal
      v-model="driverNameShow"
      :width="'600'"
      :show-title="false"
      :showConfirmButton="false"
    >
      <view>
        <view style="font-weight: bold; padding: 10rpx 0 0 20rpx"
          >系统提示</view
        >
        <image
          src="https://minio.wskjwl.com/uipicture/bell.png"
          style="width: 100rpx; height: 120rpx; margin-left: 40%"
        />
        <view class="driverModalName-box"
          >车辆管理和司机认证都通过后才可以邀请别人</view
        >

        <view style="width: 70%; margin: 0 0 25rpx 15%">
          <u-button type="primary" shape="circle" @click="driverNameconfirm"
            >确 定
          </u-button>
        </view>
      </view>
    </u-modal>
    <C_tabbar :routePath="'pages/drivertabbar/my/my'"></C_tabbar>
    <ClientModal
      @cancel="handleClientCancel"
      @submit="handleClientSubmit"
      v-if="showClientModal"
    />
    <loginTip
      :loginTipShow="loginTipShow"
      @confirm="loginTipConfirm"
      @cancel="loginTipCancel"
    />
    <certificateTip
      :certificateTipShow="certificateTipShow"
      @confirm="certificateTipConfirm"
      @cancel="certificateTipCancel"
      desc="通过审核后即可操作"
    />
  </view>
</template>

<script>
import QRCode from './../../../common/weapp-qrcode.js'
import C_tabbar from './../../../components/C_tabbar/index'
import ClientModal from '../../mycommon/client.vue'
import loginTip from '../../../components/C_tipModal/loginTip.vue'
import certificateTip from '../../../components/C_tipModal/certificateTip.vue'

export default {
  components: {
    C_tabbar,
    ClientModal,
    loginTip,
    certificateTip,
  },
  data() {
    return {
      certificateTipShow: false,
      loginTipShow: false,
      showClientModal: false, // 客户服务弹窗
      showMsg: true, // 消息红点
      newMsg: false,
      mList: [
        {
          icon: require('../../../static/my/c6.png'),
          title: '我的银行卡',
          path: '/pages/bank/index',
        },
        {
          icon: require('../../../static/my/c7.png'),
          title: '运费明细',
          path: '/pages/wallet/freight',
        },
        // {
        //   icon: require('../../../static/my/c1.png'),
        //   title: '发票管理',
        //   path: '/pages/mycommon/message'
        // },
        {
          icon: require('../../../static/my/c2.png'),
          title: '我的消息',
          path: '/pages/mycommon/message',
        },
        {
          icon: require('../../../static/my/c3.png'),
          title: '在线评价',
          path: '/pages/mycommon/evaluate',
        },
        {
          icon: require('../../../static/my/c4.png'),
          title: '意见反馈',
          path: '/pages/mycommon/feedback',
        },
        {
          icon: require('../../../static/my/c5.png'),
          title: '客户服务',
        },
        {
          icon: require('../../../static/jubao.png'),
          title: '举报投诉',
          path: '/pages/mycommon/reportcomplaints',
        },
      ],
      floatingFixedList: [
        {
          icon: 'https://minio.wskjwl.com/uipicture/cheliangguanli.png',
          path: '/pages/vehiclemanagement/vehiclemanagement',
          title: '车辆管理',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/sijirenzheng.png',
          path: '/pages/login/register',
          title: '司机认证',
        },
      ], //中间部分
      commonToolsList: [
        {
          icon: 'https://uviewui.com/common/logo.png',
          path: '/pages/routesetting/routesetting',
          title: '路线设置',
        },
        {
          icon: 'https://uviewui.com/common/logo.png',
          path: '/pages/tabbar/my/information',
          title: '个人资料',
        },
        {
          icon: 'https://uviewui.com/common/logo.png',
          path: '/pages/bankcard/bankcard',
          title: '银行卡',
        },
      ], //常用工具数组
      expandBusinessList: [
        {
          icon: 'https://uviewui.com/common/logo.png',
          title: '铁路业务',
        },
      ], //扩展业务
      helpToolsList: [
        {
          icon: 'https://minio.wskjwl.com/uipicture/yaoqingsiji.png',
          ispopup: true,
          title: '邀请司机',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/kefu1.png',
          iscustomerService: true,
          title: '客服电话',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/gonzhonghaoicon.png',
          ispopup: true,
          title: '关注公众号',
        },
        {
          icon: 'https://minio.wskjwl.com/uipicture/saoyisao.png',
          isscan: true,
          title: '扫一扫',
        },
        // {
        //   icon: 'https://minio.wskjwl.com/uipicture/caozuozhinan.png',
        //   path: '/pages/operationguide/operationguide',
        //   title: '操作指南',
        // },
        // {
        //   icon: 'https://uviewui.com/common/logo.png',
        //   title: '意见反馈',
        // },
      ], //帮助工具
      popupshow: false,
      popup1show: false,
      popupURL: '',
      popupURL1: '',
      dataKey: '',
      userInfo: {},
      pic: 'https://uviewui.com/common/logo.png',
      show: true,
      cells: [
        {
          icon: 'star',
          title: '司机信息',
        },
      ],
      cellList: [
        {
          title: '退出登录',
        },
        {
          title: '注销账号',
        },
        // {
        //   title: '退出小程序',
        // },
      ],
      avatarList: [
        {
          title: '修改密码',
        },
      ],
      avatarModel: false,
      customerServiceModel: false, //客服弹窗
      customerServiceList: [
        {
          title: '客服电话',
        },
        {
          title: '连云港:19819530008',
          phone: '19819530008',
        },
        {
          title: '日照港:19819510008',
          phone: '19819510008',
        },
      ],
      showEditPassword: false,
      showInfo: true,
      form: {
        oldPassword: undefined,
        newPassword: undefined,
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: '请输入原先密码',
            trigger: ['change', 'blur'],
          },
        ],
        newPassword: [
          {
            required: true,
            message: '请输入新密码',
            trigger: ['change', 'blur'],
          },
          // 正则判断为字母或数字
          {
            pattern: /^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,16}$/,
            // 正则检验前先将值转为字符串
            transform(value) {
              return String(value)
            },
            message: '密码应为6~16位数字字母组合，请检查格式是否正确',
            trigger: 'blur',
          },
        ],
      },
      driverNameShow: false,
      showBalance: true,
      rateValue: 5,
    }
  },
  onLoad() {},
  onShow() {
    this.getuserInfo()
    // this.creadCode()
    uni.hideTabBar({})
    this.newMsg = uni.getStorageSync('newMsg')
  },
  methods: {
    certificationReminder() {
      if (!this.userInfo.driverRealNameStatus) {
        this.$api.msg('未实名，请前往司机认证进行实名操作')
      }
    },
    certificateTipConfirm() {
      this.certificateTipShow = false
    },
    certificateTipCancel() {
      this.certificateTipShow = false
    },
    getMapLocation() {
      // uni.navigateTo({
      //   url: '/pages/bank/pwd'
      // })
    },
    certificate(type) {
      if (Object.keys(this.userInfo).length === 0) {
        return (this.loginTipShow = true)
      } else {
        uni.navigateTo({
          url: type == '1' ? '/pages/auth/driver' : '/pages/auth/car',
        })
      }
    },
    loginTipConfirm() {
      this.loginTipShow = false
    },
    loginTipCancel() {
      this.loginTipShow = false
    },
    goLogin() {
      if (Object.keys(this.userInfo).length === 0) {
        uni.reLaunch({
          url: '/pages/login/login',
        })
      }
    },
    //推荐二维码
    creadCode() {
      new QRCode('myQrcode', {
        text:
          'https://lygwl.tzszxx.com/program/#/register?id=' +
          uni.getStorageSync('userInfo').additionalInformation.userId,
        width: 120, //canvas 画布的宽
        height: 120, //canvas 画布的高
        padding: 8, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
          wx.hideLoading()
          this.popupURL = res.path
        },
      })
    },
    async getToken() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/applets/getToken'
      )
      if (code === '0') {
        this.getQrCode(result.access_token)
      }
    },
    async getQrCode(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/applets/getWxacode',
        {
          accessToken: val,
          path:
            'pages/login/login?id=' +
            uni.getStorageSync('userInfo').additionalInformation.userId,
          width: 200,
          autoColor: true,
          lineColor: {
            r: '0',
            g: '0',
            b: '0',
          },
        }
      )
      if (code === '0') {
        this.popupURL = 'https://lygminio.tzszxx.com/qrcode/' + result.originUrl
      }
    },
    handleJump(path, title) {
      if (title != '客户服务' && Object.keys(this.userInfo).length === 0) {
        return (this.loginTipShow = true)
      }
      if (
        (title == '我的银行卡' || title == '在线评价' || title == '运费明细') &&
        this.userInfo.authStatus == '0'
      ) {
        return (this.certificateTipShow = true)
      }
      if (title == '我的消息') {
        uni.setStorageSync('newMsg', false)
        this.newMsg = uni.getStorageSync('newMsg')
      }
      if (path) {
        uni.navigateTo({
          url: path,
        })
      } else {
        this.customerServiceModel = true
      }
    },
    //路由
    shortcutMenuFc(val) {
      if (val.path) {
        uni.navigateTo({
          url: val.path,
        })
      } else if (val.ispopup) {
        if (this.userInfo) {
          if (val.title != '关注公众号') {
            if (
              uni.getStorageSync('userInfo').additionalInformation.userId &&
              this.userInfo.carInfo &&
              this.userInfo.carInfo.carAuditStatus == '1' &&
              this.userInfo.driverInfo.driverAuditStatus == '1' &&
              this.userInfo.driverInfo
            ) {
              this.popupshow = true
              this.getToken()
            } else {
              this.driverNameShow = true
            }
            // this.creadCode()
          } else {
            this.popupURL1 =
              'https://minio.wskjwl.com/uipicture/gonzhonghao.png'
            this.popup1show = true
          }
        } else {
          if (val.title == '关注公众号') {
            this.popupURL1 =
              'https://minio.wskjwl.com/uipicture/gonzhonghao.png'
            this.popup1show = true
          }
        }
      } else if (val.iscustomerService) {
        this.customerServiceModel = true
      } else if (val.isscan) {
        // 允许从相机和相册扫码
        uni.scanCode({
          success: function (res) {
            console.log('条码类型：' + res.scanType)
            console.log('条码内容：' + res.result)
            uni.navigateTo({
              url: '/pages/tabbar/sourcegoods/detail?id=' + res.result,
            })
          },
        })
      }
    },
    // 提示信息弹窗确定按钮
    driverNameconfirm() {
      this.driverNameShow = false
    },
    settingBtn() {
      uni.navigateTo({
        url: '/pages/drivertabbar/my/mysetting/index',
      })
    },

    hideLogout() {
      this.avatarModel = false
    },
    showAvatar() {
      this.avatarModel = true
    },
    //调用手机号
    handleClickcustomerService(val, index) {
      if (index > 0) {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: val.phone,
          // 成功回调
          success: (res) => {},
          // 失败回调
          fail: (res) => {},
        })
      }
    },
    hidecustomerService() {
      this.customerServiceModel = false
    },
    //审核状态
    auditStatus(val) {
      let text = ''
      switch (val) {
        case 1:
          text = '审核通过'
          break
        case 2:
          text = '未通过'
          break
        default:
          text = '未审核'
      }
      return text
    },
    // 获取阿里云地址
    async getAliConfig() {
      const params = {
        id: '1',
        name: '1',
        value: '1',
      }
      const { code, data } = await this.$u.get('resource/info', params)
      if (code === 200) {
        this.dataKey = data.aliyun
      }
    },
    async getuserInfo() {
      const res = await this.$u.get('/freight-business/get/userInfo')
      if (res.code === '0') {
        uni.setStorageSync('userInfo', res.result)
        this.userInfo = res.result
      } else {
        this.$api.msg(res.message)
      }
    },
    handleClientCancel() {
      this.showClientModal = false
    },
    handleClientSubmit() {
      this.showClientModal = false
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #ffff;
}
.my-box {
  position: relative;
  width: 100%;
  .my-top-box {
    width: 100%;
    height: 367rpx;
    position: relative;
    .user-bottom-bg {
      width: 100%;
      height: 52rpx;
      position: absolute;
      bottom: 0;
    }
    .my-top-bg-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: url('../../../static/my/bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      .u-m-r-10 {
        margin-left: 16rpx;
      }
    }
  }
  .driverName-box {
    flex: 1;
  }
  .auth-status {
    width: 90rpx;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .rate-box {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
  }
  .rate-num {
    font-size: 48rpx;
    color: #ffffff;
    line-height: 48rpx;
    margin-right: 10rpx;
  }
  .rate-title {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 24rpx;
    margin-left: 5rpx;
  }
  .setting-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 40rpx;
    margin-left: 15rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .audit-box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
  }
  .audit-item {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 60rpx;
    font-weight: 500;
    color: #e4cd87;
    width: 690rpx;
    height: 110rpx;
    background: linear-gradient(270deg, #515a6a 0%, #3c3f48 100%);
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 8rpx;
  }
  .audit-item:nth-child(2) {
    margin-left: 50rpx;
  }
  .balance-box {
    position: relative;
    z-index: 2;
    display: flex;
    width: 630rpx;
    height: 140rpx;
    margin: 0 auto;
    background: linear-gradient(270deg, #289dff 0%, #2a7aff 100%);
    border: 2rpx solid rgba(232, 232, 232, 0.43);
    border-radius: 16rpx 16rpx 0px 0px;
  }
  .balance-info {
    margin-left: 20rpx;
  }
  .balance-title {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    color: #fff;
    font-size: 24rpx;
    line-height: 24rpx;
  }
  .balance-num {
    font-size: 48rpx;
    line-height: 48rpx;
    font-weight: 500;
    color: #ffffff;
  }
  .balance-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 160rpx;
    height: 56rpx;
    background: linear-gradient(270deg, #c9e5ff 0%, #fcfbfb 100%);
    font-size: 24rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    margin-left: auto;
    margin-right: 30rpx;
    color: #279bff;
  }
  .m-ul {
    padding: 0rpx 30rpx 0;
  }
  .m-li {
    height: 87rpx;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 28rpx;
    line-height: 28rpx;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
  }
  .m-li-title {
    position: relative;
    margin-left: 6rpx;
    &.msg {
      &::after {
        content: '';
        position: absolute;
        right: -12rpx;
        top: -5rpx;
        width: 12rpx;
        height: 12rpx;
        background: #ff4d4f;
        border-radius: 50%;
      }
    }
  }
  .m-icon {
    margin-right: 10rpx;
    margin-left: auto;
  }
  .color-white {
    color: white;
  }

  .floating-fixed-postion {
    position: absolute;
    top: 300rpx;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    .floatingFixedListt-box {
      width: 94%;
      background: white;
      border-radius: 4px;
      font-size: 32rpx;
      overflow: hidden;
      display: flex;
      .floatingFixedList-item-box {
        margin: 10px;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 16rpx;
        }
      }
    }
  }

  .audit .margintop40 {
    margin-top: 160rpx !important;
  }
  .title {
    font-size: 36rpx;
    font-weight: 600;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    margin-left: 32rpx;
    border-bottom: 1px solid #eeeeee;
  }

  .popupURL1-box {
    .popupURL-box {
      width: 100%;
      height: 100%;
    }
    /deep/.u-mode-center-box {
      background: transparent;
    }
  }
  .popupURL0-box {
    /deep/.u-mode-center-box {
      background: transparent;
    }
  }
  .popupURL-popup-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #437df1;
    background-image: url('https://minio.wskjwl.com/uipicture/tuijian1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 30rpx;
    .popupURL-box {
      width: 76%;
      height: 76%;
      margin: 10rpx 0;
    }
    view:nth-child(1) {
      font-size: 34rpx;
      line-height: 48rpx;
    }
    view:nth-child(2) {
      font-size: 24rpx;
      line-height: 33rpx;
    }
  }
  .auditStatus-box {
    background: #8080ff;
    width: 200rpx;
    text-align: center;
    padding: 10rpx 0;
    color: white;
    border-radius: 4rpx;
  }
  .driverModalName-box {
    white-space: nowarp;
    padding: 32rpx;
  }
}
.driver-status {
  width: 90rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  color: #fff;
  background: #cccccc;
  font-size: 18rpx;
  border-radius: 6rpx;
  margin-left: 15rpx;
  &.auth {
    color: #333;
    background: #fbd27d;
  }
}
</style>
